.item1{
    /* grid-column-start: 1;
    grid-column-end: span 2; */
/* 
    grid-column: 1 / -1;
    grid-row: 1 / span 2; */
    background: #000;
    grid-area: header;
}
.item2{
    background: #f69;
    grid-area: silder;
}
.item3{
    background: red;
    grid-area: main;
}
.item4{
    grid-area: fouter;
    background: yellow;
}
.item5{
    background: #f33;
}
.item6{
    background: #f90;
}
.item7{
    background: skyblue;
}
.item8{
    background: blue;
}
.item9{
    background: pink;
}
.item{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    /* width: 3rem;
    height: 3rem; */
}
.container{
    border: 5px solid lightblue;
    display: grid;
    grid-template-columns: 100px 120px 110px 150px;
    grid-template-rows: 100px 100px 100px 100px;
    /* justify-items: center;
    align-items: center; */
    justify-content: center;
    align-content: center;
    /* column-gap: 0.2rem;
    row-gap: 0.2rem; */
    gap:0.2rem;
    /* grid-column: 1 / span 2; */
    grid-template-areas: "header header header header"
    "silder main main main"
    "silder main main main"
    "fouter fouter fouter fouter";
}
